<template>
  <view class="home flex column bg">
    <u-navbar :is-back="false" :background="null" title="监测监控" :title-bold="true" title-color="#fff"></u-navbar>
    <!-- 搜索框 -->
    <picker-item v-model="searchData.customerName" :options="nameList" @change="handleSelectChange" />
    <u-card margin="10rpx 30rpx" :border="false" box-shadow="0px 0px 8px #ddd6d6"
      :body-style="{ padding: '30rpx 10rpx' }">
      <view slot="head">
        <view class="card-row u-flex u-row-between t-green f-bold">
          <view class="card-row-title">联网企业</view>
          <view class="card-row-title">{{info.sum}}家</view>
        </view>
      </view>
      <view slot="body">
        <view class="card-row flex u-row-center u-row-around u-col-center networked-sub">
          <view class="sub-text sub-text-normal u-flex-col u-col-center u-row-center t-white">
            <text class="u-m-b-10 u-font-40 f-bold">{{ info.normal }}</text>
            <text>正常</text>
          </view>
          <view class="sub-text sub-text-abnormal u-flex-col u-col-center u-row-center t-white">
            <text class="u-m-b-10 u-font-40 f-bold">{{ info.abnormal }}</text>
            <text>异常</text>
          </view>
          <view class="sub-text sub-text-dis u-flex-col u-col-center u-row-center t-white">
            <text class="u-m-b-10 u-font-40 f-bold">{{ info.break }}</text>
            <text>断线</text>
          </view>
        </view>
      </view>
    </u-card>
    <!-- 列表 -->
    <scroll-view :scroll-y="true" class="container item one" refresher-enabled="true" :refresher-triggered="triggered"
      :refresher-threshold="50" refresher-background="#F5F5F5" @refresherrefresh="onRefresh"
      @refresherpulling="onPulling" @refresherrestore="onRestore" @refresherabort="onAbort"
      @scrolltolower="onScrollToLower">
      <view class="container-body">
        <template v-if="list && list.length">
          <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :show-head="false"
            :body-style="{ padding: '30rpx 20rpx' }" v-for="(item, index) in list" :key="index"
            @click="handleCourseClick(item)">
            <view slot="body">
              <view class="card-row u-flex u-row-between">
                <view class="card-row-title t-title">{{ item.enName }}</view>
                <text :class="getClass(item.networkStatus)">{{item.label}}</text>
              </view>
            </view>
          </u-card>
          <view class="p-t-10 p-b-10">
            <u-loadmore :status="status" />
          </view>
        </template>
        <template v-if="showEmpty">
          <view class="c-empty p-absolute-center">
            <u-empty text="暂无数据"></u-empty>
          </view>
        </template>
      </view>
    </scroll-view>

    <u-tabbar bg-color="#0d1a51" inactive-color="#666" active-color="#fff" height="60px" icon-size="30"
      mid-button-size="40" :list="barList" :mid-button="midButton"></u-tabbar>
  </view>
</template>

<script>
import PickerItem from '../../components/pickerItem/pickerItem.vue'

export default {
  name: 'index',
  components: { PickerItem },
  data() {
    return {
      searchData: {
        customerName: ''
      },
      info: {
        abnormal: '', // 异常
        normal: '', // 正常
        break: '', // 断线
        sum: ''
      },
      searchSrc: require('@/static/image/search_icon.svg'),
      tagColor: ['#49BDCC', '#dd524d'],
      triggered: false, // 下拉刷新
      status: 'loading',
      showEmpty: false,
      list: [],
      barList: [],
      nameList: []
    }
  },
  mounted() {
    this.init()
    this.getData()

    this.barList = getApp().globalData.list
    this.getOptions()
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      // this.searchData.customerName = ''
      this.status = 'loading'
      this.showEmpty = false
    },
    getClass(networkStatus) {
      let color = ''
      if (networkStatus === '0') {
        color = 't-light-green'
      } else if (networkStatus === '1') {
        color = 't-error'
      } else if (networkStatus === '2') {
        color = 't-orange'
      }
      return color
    },
    /**
     * 请求数据
     */
    async getData() {
      const info = await this.$post('/mobile/environmentMonitor/networkEnList', this.searchData)
      if (info && info.body) {
        this.list = info.body.data
        this.info.abnormal = info.body.abnormal
        this.info.normal = info.body.normal
        this.info.break = info.body.break
        this.info.sum = info.body.abnormal + info.body.normal + info.body.break
        // 到底了
        this.status = 'nomore'
        // 数据空
        if (this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    /**
     * 查看或者修改
     */
    handleCourseClick(item) {
      const data = {
        customerName: item.enName,
        enCode: item.enCode
      }
      uni.navigateTo({
        url: `/pages/monitoring/details?data=${JSON.stringify(data)}`
      })
    },
    /**
     * select选中
     */
    handleSelectChange(val) {
      setTimeout(() => {
        this.getData()
      }, 300)
    },
    /**
     * 请求煤矿名称列表
     */
    getOptions() {
      this.nameList = getApp().globalData.coalList
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {}
  },
  computed: {
    midButton() {
      return getApp().globalData.tabbarMidButton
    }
  },
}
</script>

<style lang="scss" scoped>
.home.bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #0d1a51;
  background: url('/static/image/bg.png');
  background-repeat: no-repeat;
  background-size: contain;
  /* 搜索框 */
  .search {
    padding: 20rpx 28rpx;
  }
  .networked-title {
    background: #aeb0b3;
    height: 80rpx;
  }
  .networked-sub {
    .sub-text {
      width: 30%;
      height: 140rpx;
    }
    .sub-text-normal {
      background: url('/static/image/online_normal_icon.svg') no-repeat 100% 100%/100% 100%;
    }
    .sub-text-abnormal {
      background: url('/static/image/online_abnormal_icon.svg') no-repeat 100% 100%/100% 100%;
    }
    .sub-text-dis {
      background: url('/static/image/online_disconnection_icon.svg') no-repeat 100% 100%/100% 100%;
    }
  }
}
.container-body{
  overflow: hidden;
}
</style>
